import React, { useState } from "react";
import type { FC } from "react";
import {
  SearchOutlined,
  DeleteOutlined,
  PlusOutlined,
  BarsOutlined,
  StarOutlined,
} from "@ant-design/icons";
import { Row, Col, Input, Button } from "antd";
import type { GetProps } from "antd";
import { useNavigate, Outlet, useLocation } from "react-router-dom";
import "./index.scss";
type SearchProps = GetProps<typeof Input.Search>;
const { Search } = Input;

const List: FC = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  const [state, setState] = useState<number>(2);
  const [dataList, setDataList] = useState<DataItem[]>([
    {
      _id: "99000019780404676X",
      title: "周新复标越东论",
      isPublished: false,
      isStar: false,
      answerCount: 52,
      createdAt: "2017-04-05 18:28:11",
      isDeleted: false,
    },
    {
      _id: "440000200207175376",
      title: "参导物",
      isPublished: true,
      isStar: true,
      answerCount: 88,
      createdAt: "2015-03-06 12:22:11",
      isDeleted: true,
    },
    {
      _id: "640000200009239858",
      title: "以红酸两至",
      isPublished: true,
      isStar: false,
      answerCount: 58,
      createdAt: "1978-05-28 11:54:04",
      isDeleted: false,
    },
    {
      _id: "370000201001273022",
      title: "过较条加变果",
      isPublished: false,
      isStar: false,
      answerCount: 61,
      createdAt: "1978-10-29 16:52:41",
      isDeleted: false,
    },
    {
      _id: "430000202403211765",
      title: "思化律",
      isPublished: true,
      isStar: false,
      answerCount: 75,
      createdAt: "1984-07-06 15:56:59",
      isDeleted: false,
    },
    {
      _id: "630000201703187843",
      title: "东列那或才身",
      isPublished: true,
      isStar: false,
      answerCount: 81,
      createdAt: "1975-05-19 12:50:44",
      isDeleted: false,
    },
    {
      _id: "530000198306174530",
      title: "已思查外后信",
      isPublished: false,
      isStar: false,
      answerCount: 56,
      createdAt: "2011-04-21 12:54:16",
      isDeleted: false,
    },
    {
      _id: "530000197505151804",
      title: "联叫建派清",
      isPublished: false,
      isStar: false,
      answerCount: 60,
      createdAt: "1992-07-03 14:38:13",
      isDeleted: true,
    },
    {
      _id: "640000200803021514",
      title: "只住商众引",
      isPublished: false,
      isStar: false,
      answerCount: 68,
      createdAt: "1980-03-17 01:16:11",
      isDeleted: false,
    },
    {
      _id: "810000201904094129",
      title: "及志叫",
      isPublished: false,
      isStar: false,
      answerCount: 68,
      createdAt: "1996-06-06 17:29:22",
      isDeleted: true,
    },
  ]);
  const onSearch: SearchProps["onSearch"] = (value?, _e?, info?) => {
    console.log(info?.source, value);
    console.log(_e);
    console.log(info);
  };
  interface DataItem {
    _id: string;
    title: string;
    isPublished: boolean;
    isStar: boolean;
    answerCount: number;
    createdAt: string;
    isDeleted: boolean;
  }

  const goPage = (status: number) => {
    switch (status) {
      case 1:
        break;
      case 2:
        navigate("/home/manage");
        break;
      case 3:
        navigate("/home/manage/star");
        break;
      case 4:
        navigate("/home/manage/trash");
        break;
      default:
        break;
    }
    setState((pre) => (pre = status));
  };
  return (
    <div className="List">
      <Row wrap={false} style={{ marginBottom: "20px" }}>
        <Col flex="auto" className="col-left">
          <Button
            color="primary"
            onClick={() => {
              goPage(1);
            }}
            disabled={state === 1}
          >
            <PlusOutlined />
            新建问卷
          </Button>
          <Button
            onClick={() => {
              goPage(2);
            }}
            color="primary"
            disabled={pathname === "/home/manage"}
          >
            <BarsOutlined />
            我的问卷
          </Button>
          <Button
            color="primary"
            onClick={() => {
              goPage(3);
            }}
            disabled={pathname === "/home/manage/star"}
          >
            <StarOutlined />
            星标问卷
          </Button>
          <Button
            color="primary"
            onClick={() => {
              goPage(4);
            }}
            disabled={pathname === "/home/manage/trash"}
          >
            <DeleteOutlined />
            回收站
          </Button>
        </Col>
        <Col flex="none">
          <Search
            placeholder="输入关键字"
            size="large"
            allowClear
            enterButton={<SearchOutlined />}
            onSearch={onSearch}
            onPressEnter={(e) => {
              onSearch((e.target as HTMLInputElement).value);
            }}
          />
        </Col>
      </Row>

      <Outlet context={{ dataList }} />
    </div>
  );
};

export default List;
